/**
 * Created by zhaoxk on 2017/2/27.
 */
import React from 'react';
import _ from 'lodash';
import { connect } from 'dva';
import { Icon } from 'antd-mobile';
import ListCustom from '../../../components/list-custom/';
import styles from './index.less';

function DiscussList({
    dispatch,
    patients: { data: patients },
    discuss: { data },
}) {
    const male = require('../../../assets/img/male.svg');
    const female = require('../../../assets/img/female.svg');
    const defaultAvatar = require('../../../assets/img/defaultAvatar.png');
    const clickHandler = (id) => (e) => {
        e.preventDefault();
        dispatch({
            type: 'discuss/setState',
            payload: {
                current: {
                    id,
                }
            },
        });
    };
    const props = {
        items: (item) => {
            const { patientId, id } = item;
            const patient = _.find(patients, ['id', patientId]);
            const { name, age, portrait } = patient;
            const gender = patient.gender === '1' ? <Icon type={male}/> : <Icon type={female} />;
            const { applyDate, applierName, departmentName } = item;
            return (
                <div
                    className={styles.list}
                    onClick={clickHandler(id)}
                >
                    <div className={styles.portrait}>
                        {portrait ? <img src={portrait} /> : <img src={defaultAvatar} />}
                    </div>
                    <div className={styles.patient}>
                        <span className={styles.name}>{name}</span>
                        <span className={styles.gender}>{gender}</span>
                        <span className={styles.age}>{age}</span>
                    </div>
                    <div className={styles.applier}>
                        申请人：{applierName} ({departmentName})
                    </div>
                    <div className={styles.date}>
                        {applyDate}
                    </div>
                </div>
            );
        },
        data,
    };
    return (
        <ListCustom
            {...props}
        />
    );
}


function mapStateToProps({ discuss, patients }) {
    return {
        discuss,
        patients,
    };
}

export default connect(mapStateToProps)(DiscussList);
